import React, { useState } from 'react'
import { useEffect } from 'react';
import axios from 'axios';
import { useSelector } from 'react-redux';

export default function HeroList() {
  //获取 redux 中的状态
  let {heros, isFirst, loading} = useSelector(state => state.hero)

  return (
    <div className="hero-list">
      {/* 欢迎界面提醒 */}
      {isFirst && <h2 className='center'>欢迎来到王者荣耀~~</h2>}
      {/* 空状态提醒 */}
      {heros.length === 0 && !isFirst && !loading && <h2 className='center'>暂无数据</h2>}
      {/* 正在加载中的状态 */}
      {loading && <h2 className="center">搜索中....</h2>}
      {/* 列表渲染 */}
      {
        heros.map(item => {
          return <div className="item" key={item.id}>
                    <img src={"http://cdn.xiaohigh.com" + item.image} alt="" />
                    <p>{item.name}</p>
                  </div>
        })
      }
    </div>
  )
}
